<template>
<el-dialog :title="$t('mainHeader.systemSetting')" :visible.sync="dialogVisible" :append-to-body="true" :before-close="hideDialog">

    <el-form ref="form" label-width="140px" label-position="right">

        <el-form-item :label="$t('mainHeader.Language')">
            <el-select v-model="configForm.lang">
                <el-option v-for="(item,index) in LanguageList" :key="index" :label="item.lable" :value="item.value"></el-option>
            </el-select>
        </el-form-item>
        
         <el-form-item :label="$t('mainHeader.fontSettings')">
            <el-select v-model="configForm.fontFamily">
                <el-option v-for="(item,index) in fontList" :key="index" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item :label="$t('mainHeader.Version')">
            <el-tag type="success">{{require('../../../../package.json').version}}</el-tag>
            <!-- <span class="checkForUpdate" @click="checkUpdate">{{$t('mainHeader.checkUpdate')}}</span> -->
        </el-form-item>
   
        <el-form-item :label="$t('mainHeader.codeRepository')">
            <img class="codeRepositoryLogo" @click="openUrl(gitee)" src='@/assets/image/gitee.svg'/>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateConfig">{{$t('aside.determine')}}</el-button>
        <el-button @click="hideDialog">{{$t('aside.cancel')}}</el-button>
    </span>
</el-dialog>

</template>

<script>
import {shell} from 'electron'
import {getFonts} from '@/util/PluginConfig'
import locaStoreCache from '@/util/cache/localStoreCache'
export default {
    props:["dialogVisible"],
    data(){
        return {
            configForm:{
                lang:'zh',
                fontFamily:'微软雅黑'
            },
            LanguageList:[
                {lable:"简体中文",value:"zh"},
                {lable:"English",value:"en"},
            ],
            gitee:"https://gitee.com/gayligayqi/pdd-redis-gui.git",
            fontList:[]
        }
    },
    //创建时间
    created(){
        //获取字体
       getFonts().then((res)=>{
           this.fontList=res
       })
       //回写配置
       const settings=locaStoreCache.getConfig();
       if(settings){
           this.configForm.lang=settings.lang
           this.configForm.fontFamily=settings.fontFamily
       }
    },
    methods:{
        //外置打开链接
        openUrl(url){
            shell.openExternal(url)
        },
        //修改字体
        updateConfig(){
            locaStoreCache.setConfig(this.configForm)
            this.$i18n.locale=this.configForm.lang
            this.$eventBus.$emit('setFontFamily')
            this.hideDialog();
            this.$message.success({
                message:this.$t('mainHeader.settingsSuccess')
            })
        },
        //隐藏窗口
        hideDialog(){
            this.$emit('hideDialog')
        }
    }
}
</script>

<style scoped>
.codeRepositoryLogo{
    height: 30px;
    width: 30px;
}
.codeRepositoryLogo:hover{
    transform:scale(1.1);
    cursor: pointer;
}
.checkForUpdate{
    font-size: 12px;
}
.checkForUpdate:hover{
    cursor: pointer;
    text-decoration: underline;
    color: deepskyblue;
}
</style>